<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
    <title>评论</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="css/comment.css"/>

    <script type="text/javascript" src="../../js/base.js"></script>

    <style type="text/css">
        .aui-btn-type {
            color: #fe1065 !important;
            font-size: 0.9rem;
            border: 1px #fe1065 solid;
        }
        .swiper {width: 100%;	height: 102%;	position: absolute;	bottom: -0.05rem;	left: 0;	background-color: #000;	overflow: hidden;	z-index: 999999999;}
        .swiper .swiper-container {	width: 100%;	height: 102%;}
        .swiper .swiper-slide {overflow: hidden}
        .swiper .delete {width: 2rem;bottom: 3rem;	z-index: 999999999;}
        .swiper .num-show{top:5rem;position: absolute;color: #FFFFFF;text-align: center; height: 4rem;width: 100%;}
    </style>
</head>
<body id="detailBody">
<section id="app" v-cloak>

<header class="aui-bar aui-bar-nav aui-bar-top" @click="goBack()">
    <!--<a class="aui-pull-left aui-btn goBack" >-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->
    <!--</a>-->
    <div class="aui-title">评论({{commentNum.allCount}})</div>
</header>

    <!--<div class="aui-flex-item-12 aui-margin-b-10 comment">-->
        <!--<ul class="aui-flex-col aui-font-size-14" style="margin-top:2.5rem;background: #fff;">-->
            <!--<li class="aui-flex-item-4 aui-padded-10" id="all" v-on:click="goAllComment()" >-->
                <!--<p><span>全部</span>(<span>{{commentNum.allCount}}</span>)</p>-->
            <!--</li>-->
            <!--<li class="aui-flex-item-4 aui-padded-10" id="haoPing" v-on:click="goGoodComment()" >-->
                <!--<p><span>好评</span>(<span>{{commentNum.all45}}</span>)</p>-->
            <!--</li>-->
            <!--<li class="aui-flex-item-4 aui-padded-10" id="zhongPing"  v-on:click="goZhongPingComment()" >-->
                <!--<p><span>中评</span>(<span>{{commentNum.all23}}</span>)</p>-->
            <!--</li>-->
            <!--<li class="aui-flex-item-4 aui-padded-5 aui-margin-l-5" id="chaPing" v-on:click="goChaPingComment()" >-->
                <!--<p><span>差评</span>(<span>{{commentNum.all01}}</span>)</p>-->
            <!--</li>-->
            <!--<li class="aui-flex-item-4 aui-padded-5 " id="imgComment" v-on:click="goImageComment()"  >-->
                <!--<p><span>有图</span>(<span>{{commentNum.allImages}}</span>)</p>-->
            <!--</li>-->
        <!--</ul>-->
    <!--</div>-->

    <div class="aui-card-list  aui-padded-b-10 " v-for="commentInfo,index in commentInfoList" style="margin-bottom: 0.5rem;margin-top:2.7rem">
        <div class="aui-card-list-header aui-card-list-user" style="padding:0.5rem 0.5rem">
            <div class="aui-card-list-user-avatar">
                <img class="aui-img-round" v-bind:src="commentInfo.wx_images" alt="">
            </div>
            <div class="aui-card-list-user-name">
                <div>
                    <p>{{commentInfo.wx_name}}</p>
                    <p v-if="!commentInfo.wx_name">匿名评论</p>
                    <p>小普会员</p>
                </div>
                <small>
                    <img class="aui-col-xs-2" style="width:0.7rem;" v-for="v in getSartNum(commentInfo.comment_rank)" src="../../icon/4-1/xingxing.png"  >
                </small>
            </div>
        </div>
        <div class="aui-padded-l-10 aui-margin-t-5">{{commentInfo.content}}</div>
        <div class=" aui-row" >
            <div class="aui-col-xs-3 aui-padded-l-10 aui-padded-r-10"  v-for="imgInfo,ix in commentInfo.children" v-if="ix<4">
                <img  @click="lookImg(index,ix)" v-bind:src="getImageComment(imgInfo.comment_image)" style="width:3.5rem;height:3.5rem;margin-bottom:0.3rem">
            </div>
        </div>
        <div class="aui-flex-col borderType" style="border-bottom:1px solid #eee">
            <div class="aui-col-xs-9">
                <p class="aui-margin-l-10">{{commentInfo.goods_name}}</p>
                <p class="aui-padded-b-10 ">评价日期:{{getDate(commentInfo.add_time+"000")}}</p>
            </div>
            <!--<div class="aui-col-xs-3 aui-text-center aui-margin-b-10 like" >-->
                <!--<div><i class="aui-iconfont aui-icon-laud"></i> 888</div>-->
            <!--</div>-->
        </div>

    </div>
    <div class="aui-btn aui-btn-block textCol" @click="lookMoreComment()" v-if="commentInfoList.length<commentNum.allCount">点击加载更多</div>

    <!--图片放大 开始-->
        <section class="swiper" v-show="isShowSwiper"  v-bind:transition="'expand'">
            <div class="num-show fz14">{{bigImgIndx}}/{{bigImgLength}}</div>
            <div class="swiper-container swiper-container-horizontal" id="mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="imgListInfo,index in bigImgArr">
                        <div class="swiper-zoom-container" >
                            <img class="center" v-bind:src="getImageComment(imgListInfo.comment_image)" class="exampleImg"  v-on:click="closeSwiper"/>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    <!--图片放大 结束-->
</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/swiper.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-tab.js"></script>
<script type="text/javascript" src="js/comment.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>

</body>
</html>